<template>
	<view class="tmpl">
		<van-tab @click="onTab" :tabs="tabs" />
		<view v-show="current == 0">
			<view id="news_tmpl">
				<view style="margin-top: 15px;">
					<view class="list" v-for="(item, index) in news" :key="index" @click="JumpToDetail(0, item.noticeId)">
						<view class="item">
							<view class="detial">
								<view class="title">
									<text class="nickname">{{ item.noticeTitle }}</text>
								</view>
								<view class="info">
									<view class="datetime" style="padding-top: 30rpx;">
										<text>{{ item.createTime }}</text>
									</view>
								</view									
							<view class="content">{{ item.noticeJk }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current == 1">
			<view id="notice_tmpl">
				<view style="margin-top: 15px;">
					<view class="list" v-for="(item, index) in news" @click="JumpToDetail(1, item.tgId)">
						<view class="item" style="margin-top: 30rpx;">
							<view class="detial">
								<view class="top">
									<view class="info">
										<text class="class_name">{{ item.tgTitle }}</text>
									</view>
									<view class="date">
										<text>{{ item.createTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current == 2">
			<view id="report_tmpl">
				<view style="margin-top: 15px;">
					<view class="list" v-for="(item, index) in announcement" :key="index" @click="JumpToDetails(2, item.tbId)">
						<view class="item">
							<view class="detial">
								<view class="title">
									<text class="nickname">{{ item.tbTitle }}</text>
								</view>
								<view class="info">
									<!-- 	<view>
										<text>{{ item.readNum }}</text>
										人阅读，
										<text>{{ item.favNum }}</text>
										人收藏
									</view> -->
									<view class="datetime" style="padding-top: 80rpx;">
										<text>{{ item.createTime }}</text>
									</view>
								</view>
							</view>

							<view class="content">{{ item.tbJk }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current == 3">
			<view id="periodical_tmpl">
				<view style="margin-top: 15px;">
					<view class="list" v-for="(item, index) in news" :key="index" @click="JumpToDetail(3, item.noticeId)">
						<view class="item">
							<view class="detial">
								<view class="title">
									<text class="nickname">{{ item.noticeTitle }}</text>
								</view>
								<view class="info">
									<view class="datetime" style="padding-top: 50rpx;">
										<text>{{ item.createTime }}</text>
									</view>
								</view>
							</view>
							<view class="content">{{ item.noticeJk }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import vanTab from '../../components/van-tab/van-tab.vue';
import config from '../../static/common/config.js';
export default {
	components: {
		vanTab
	},
	data() {
		return {
			current: 0,
			tabs: ['公司新闻', '通告', '通报', '安全期刊'],
			// news
			pageNum: 1,
			pageSize: 10,
			news: [],
			images_01: [],
			// report
			announcement: []
		};
	},
	onShow: function() {
		this.pageNum = 0;
		switch (this.current) {
			case 0:
				this.loadNews();
				break;
			case 1:
				this.loadNotice();
				break;
			case 2:
				this.loadReport();
				break;
			case 3:
				this.loadPeriodical();
				break;
		}
	},
	onReachBottom() {
		//uniapp 监听下拉加载生命周期
		scrollDownPage();
	},
	methods: {
		onTab(obj) {
			this.pageNum = 0;
			this.current = Number(obj.index);
			switch (this.current) {
				case 0:
					this.loadNews();
					break;
				case 1:
					this.loadNotice();
					break;
				case 2:
					this.loadReport();
					break;
				case 3:
					this.loadPeriodical();
					break;
			}
		},
		scrollDownPage() {
			let _this = this;
			this.pageNum += 1;
			switch (Number(this.current)) {
				case 0:
					// 查询海科新闻详情
					this.$api
						.xwlb({
							// pageNum: _this.pageNum,
							// pageSize: _this.pageSize
							pageNum: 1,
							pageSize: 10
						})
						.then(res => {
							_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
							_this.news = res.data.rows;
							console.log(_this.news);
							

							_this.news.push(res.data.rows);
							// console.log(_this.news)
						});
					break;
				case 1:
					// 获得通报信息
					this.$api
						.tglist({
							pageNum: _this.pageNum,
							pageSize: _this.pageSize
						})
						.then(res => {
							console.log(res);
							_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
							// console.log('tglist', res)
							_this.news = res.data.rows;
							_this.news.push(res.data.rows);
						});
					break;
				case 2:
					// 获得通报信息
					this.$api
						.tglist({
							pageNum: _this.pageNum,
							pageSize: _this.pageSize
						})
						.then(res => {
							console.log(res);
							_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
							_this.announcement = res.data.rows;
							_this.announcement.push(res.data.rows);
						});
					break;
				case 3:
					// 期刊
					let url = '/' + _this.pageNum + '/' + _this.pageSize;
					this.$api.periodical(url).then(res => {
						console.log(res);
						_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
						_this.news.push(res.data.rows);
					});
					break;
			}
		},
		loadNews() {
			let _this = this;
			this.pageNum += 1;
			if (this.pageNum == 1) _this.news = [];
			this.$api
				.xwlb({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize
				})
				.then(res => {
					_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
					console.log('1111111111', res);
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i];
						// console.log(item)
						// item['imageUrl'] = config + item['imageUrl']
						_this.news.push(item);
					}
				});
		},
		loadNotice() {
			let _this = this;
			let url = '/' + _this.pageNum + '/' + _this.pageSize;
			this.$api.tglist(url).then(res => {
				console.log(res);
				_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
			
				// console.log("tglist", res)
				_this.news = res.data.rows;
			});
		},
		loadReport() {
			let _this = this;
			let url = '/' + _this.pageNum + '/' + _this.pageSize;
			this.$api.tblist(url).then(res => {
				console.log(res);
				_this.$_if.FormatThumb(res.data.rows, config, 'imageUrl');
				// console.log("tblist", res)
				_this.announcement = res.data.rows;
			});
		},
		loadPeriodical() {
			let _this = this;
			let url = '/' + _this.pageNum + '/' + _this.pageSize;
			this.$api.periodical(url).then(res => {
				console.log(res);
				// console.log('loadPeriodical',res)
				_this.news = res.data.rows;
				for (let a = 0; a < res.data.rows.length; a++) {
					res.data.rows[a].noticeContent = res.data.rows[a].noticeContent ? res.data.rows[a].noticeContent.replace('<img', '<img style="width:100%') : '';
				}
				_this.news = res.data.rows;
			});
		},
		JumpToDetail(type, notice_id) {
			uni.navigateTo({
				url: './detail?type=' + type + '&notice_id=' + notice_id
			});
		},
		JumpToDetails(type, tbId) {
			uni.navigateTo({
				url: 'details?type=' + type + '&tbId=' + tbId
			});
		},
		showImage(src) {
			uni.previewImage({
				urls: [src],
				current: src
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	padding: 0;
	margin: 0;
}

#news_tmpl {
	.list {
		margin-bottom: 20px;

		.group {
			@extend .container-2;

			.item {
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				border-radius: 10upx;
			}

			.datetime {
				font-size: $uni-font-size-sm;
				color: rgba(66, 66, 66, 0.7);
				text-align: center;
				padding: 10upx 0;
			}

			.main {
				background-color: $background-color-1;
				border-top-left-radius: 10upx;
				border-top-right-radius: 10upx;
				width: 100%;
				height: 200upx;

				image {
					border-top-left-radius: 10upx;
					border-top-right-radius: 10upx;
					@extend .icon-image-size-full;
					height: 200upx;
				}

				.detail {
					position: absolute;
					width: calc(100% - 19upx);
					height: 200upx;
					color: $font-color-1;
					margin-top: -205upx;
					background-image: linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

					.title {
						padding: 20upx;
						margin-top: 130upx;
						font-size: $uni-font-size-base;
					}
				}
			}

			.sub-list {
				background-color: $background-color-1;
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
			}

			.sub-item {
				padding: 20upx;
				@extend .flex-between;
				border-top: solid 1px #e5e5e5;

				.title {
					font-size: $uni-font-size-base;
					color: #424242;
				}

				.thumb {
					width: 100upx;
					height: 100upx;

					image {
						@extend .icon-image-size-full;
					}
				}
			}
		}
	}
	.newss1 {
		margin-top: 20rpx;
		overflow-y: auto;
		overflow-x: hidden;
		width: 300rpx;
		// 深度处理
		::v-deep img,
		::v-deep p,
		::v-deep span {
			width: 100%;
		}
	}

	.list {
		padding-bottom: 0;

		.item {
			position: relative;
			background-color: $background-color-1;
			padding: 20upx;
			margin-top: 10upx;

			.detial {
				border-bottom: solid 1px #e0e0e0;

				.title {
					font-size: $font-size-title-2;
					color: $font-color-2;
					padding: 20upx 0;
					padding-top: 0;

					.nickname {
						color: #4e0606;
						padding: 0 10upx;
					}
				}

				.info {
					@extend .flex-between;
					font-size: $uni-font-size-sm;
					padding-bottom: 10upx;
				}

				.datetime {
					color: $font-color-4;
					position: absolute;
					right: 30rpx;
					top: 40rpx;
				}
			}

			.content {
				padding: 5upx;
				padding-top: 10upx;
			}
		}
	}

	.collection {
		position: absolute;
		padding: 12upx 35upx;
		color: $font-color-1;
		background-color: #57a9be;
		display: inline;
		right: 30upx;
		border-radius: 10upx;
		margin-top: -110upx;
		font-size: $uni-font-size-base;
	}
}

#notice_tmpl {
	.list {
		&:nth-child(1) {
			// padding-top: 80upx;
		}

		.item {
			margin-top: 10upx;
			background-color: $background-color-1;
			padding: 20upx 30upx;
			@extend .flex-between;

			.thumb {
				flex-grow: 1;

				image {
					@extend .image-radis;
					width: 95upx;
					height: 95upx;
				}
			}

			.detial {
				margin-left: 20upx;
				flex-grow: 1;

				.top {
					@extend .flex-between;
					border-bottom: solid 1px rgba(66, 66, 66, 0.3);
					padding: 10upx 0;
					padding-top: 0;
				}
			}

			.info {
				font-size: $font-size-title;

				.class_name {
				}

				.nickname {
					margin-left: 10upx;
				}
			}

			.date {
				font-size: $uni-font-size-base;
				color: $font-color-4;
			}

			.description {
				font-size: $uni-font-size-base;
				color: $font-color-2;
				padding-top: 10upx;
				line-height: 40upx;
				height: 40upx;
				overflow: hidden;
			}
		}
	}
}

#report_tmpl {
	.list {
		// padding-top: 70upx;
		padding-bottom: 0;

		.item {
			position: relative;
			background-color: $background-color-1;
			padding: 20upx;
			margin-top: 10upx;

			.detial {
				border-bottom: solid 1px #e0e0e0;

				.title {
					font-size: $font-size-title-2;
					color: $font-color-2;
					padding: 20upx 0;
					padding-top: 0;

					.nickname {
						color: #4e0606;
						padding: 0 10upx;
					}
				}

				.info {
					@extend .flex-between;
					font-size: $uni-font-size-sm;
					padding-bottom: 10upx;
				}

				.datetime {
					color: $font-color-4;
					position: absolute;
					right: 30rpx;
					top: 40rpx;
				}
			}

			.content {
				padding: 5upx;
				padding-top: 10upx;
			}
		}
	}

	.collection {
		position: absolute;
		padding: 12upx 35upx;
		color: $font-color-1;
		background-color: #57a9be;
		display: inline;
		right: 30upx;
		border-radius: 10upx;
		margin-top: -110upx;
		font-size: $uni-font-size-base;
	}
}

#periodical_tmpl {
	.list {
		margin-bottom: 20px;

		.group {
			@extend .container-2;

			.item {
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				border-radius: 10upx;
			}

			.datetime {
				font-size: $uni-font-size-sm;
				color: rgba(66, 66, 66, 0.7);
				text-align: center;
				padding: 10upx 0;
			}

			.main {
				background-color: $background-color-1;
				border-top-left-radius: 10upx;
				border-top-right-radius: 10upx;
				width: 100%;
				height: 200upx;

				image {
					border-top-left-radius: 10upx;
					border-top-right-radius: 10upx;
					@extend .icon-image-size-full;
					height: 200upx;
				}

				.detail {
					position: absolute;
					width: calc(100% - 19upx);
					height: 200upx;
					color: $font-color-1;
					margin-top: -205upx;
					background-image: linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

					.title {
						padding: 20upx;
						margin-top: 130upx;
						font-size: $uni-font-size-base;
					}
				}
			}

			.sub-list {
				background-color: $background-color-1;
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
			}

			.sub-item {
				padding: 20upx;
				@extend .flex-between;
				border-top: solid 1px #e5e5e5;

				.title {
					font-size: $uni-font-size-base;
					color: #424242;
				}

				.thumb {
					width: 100upx;
					height: 100upx;

					image {
						@extend .icon-image-size-full;
					}
				}
			}
		}
	}

	.list {
		padding-bottom: 0;

		.item {
			position: relative;
			background-color: $background-color-1;
			padding: 20upx;
			margin-top: 10upx;

			.detial {
				border-bottom: solid 1px #e0e0e0;

				.title {
					font-size: $font-size-title-2;
					color: $font-color-2;
					padding: 20upx 0;
					padding-top: 0;

					.nickname {
						color: #4e0606;
						padding: 0 10upx;
					}
				}

				.info {
					@extend .flex-between;
					font-size: $uni-font-size-sm;
					padding-bottom: 10upx;
				}

				.datetime {
					color: $font-color-4;
					position: absolute;
					right: 30rpx;
					top: 40rpx;
				}
			}

			.content {
				padding: 5upx;
				padding-top: 10upx;
			}
		}
	}

	.collection {
		position: absolute;
		padding: 12upx 35upx;
		color: $font-color-1;
		background-color: #57a9be;
		display: inline;

		right: 30upx;
		border-radius: 10upx;
		margin-top: -110upx;
		font-size: $uni-font-size-base;
	}
}
image,
img {
	max-width: 100% !important;
	width: 100%;
}
.uer {
	margin-top: 20rpx;
	overflow-y: auto;
	overflow-x: hidden;
	width: 700rpx;
	
	// 深度处理
	::v-deep img,
	::v-deep p,
	::v-deep span {
		max-width: 100% !important;
		max-height: 50% !important;
	}
}
</style>
